<template>
    <div id="waste"
         style="width:90%;height:90%;"></div>
</template>

<script>
import echarts from 'echarts'
export default {
	name: 'waste',
	props: ['waste'],
	data() {
		return {
			// 页面查询数据
			data: [],
			areaData: [],
			queryData: {
				selectArea: 0,
				date: []
			},
			myChart: null,
			option: {}
		}
	},
	mounted() {
		setTimeout(() => {
			this.hadleGetFilesListApi()
		})
	},
	methods: {
		hadleGetFilesListApi(x, y, z) {
			const option = {
				title: {
					text: '近七日生活垃圾趋势图',
					textStyle: {
						//
						color: 'rgb(30,30,30)',
						fontSize: 20,
                        fontWeight:550
					}
				},

				tooltip: {
					trigger: 'axis'
				},
				// color: ['rgb(3,201,178)', 'rgb(46,115,255)'],
                color: ['rgb(46,115,255)', 'rgb(3,201,178)'],
				legend: {   
					right: 10,
					data: [
						{
							name: '易腐垃圾',
							textStyle: {
								// color:'#2ce3a8',
								// color: '#ffffff',
                               color: 'rgb(46,115,255)',
							}
						},
						{
							name: '其他垃圾',
							textStyle: {
								// color:'#d4e32c',
								// color: '#ffffff',
                                
                                color:'rgb(3,201,178)'
							}
						}
					],
					textStyle: {
						fontSize: 18
					},
					// icon: 'roundRect', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
					itemWidth: 30, // 设置宽度
					itemHeight: 12, // 设置高度
					itemGap: 40 // 设置间距
				},

				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},

				xAxis: {
					type: 'category',
					data: x,
					splitLine: {
						show: false
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: 'rgb(181,186,195)', // 更改坐标轴文字颜色
							fontSize: 16 // 更改坐标轴文字大小
						}
					},
					axisLine: {
						lineStyle: {
							color: '#FFFFFF',
							width: 0.2
						}
					}
				},
				yAxis: {
					type: 'value',
					name: '单位(kg)',
					// min: 0,
					// max: 100,
					axisLabel: {
						show: true,
						textStyle: {
							color: 'rgb(181,186,195)', // 更改坐标轴文字颜色
							fontSize: 16 // 更改坐标轴文字大小
						}
					},
					splitLine: {
						show: true,
						lineStyle: {
							type: 'dashed',
							width: 0.5,
							color: '#4F4F4F'
						}
					},

					axisLine: {
						lineStyle: {
							color: '#FFFFFF',
							width: 0.2
						}
					}
				},
				// Declare several bar series, each will be mapped
				// to a column of dataset.source by default.
				series: [
					{
						name: '易腐垃圾',
						type: 'line',
						smooth: true,
                        showSymbol: false,
						data: y,
						// areaStyle: {
						// 	normal: {
						// 		color: new this.$echarts.graphic.LinearGradient(
						// 			0,
						// 			0,
						// 			0,
						// 			1,
						// 			[
						// 				{
						// 					offset: 0,
						// 					color: 'rgba(44,227,168,0.9)'
						// 				},
						// 				{
						// 					offset: 0.4,
						// 					color: 'rgba(44,227,168,0.5)'
						// 				},
						// 				{
						// 					offset: 1,
						// 					color: 'rgba(44,227,168,0.1)'
						// 				}
						// 			]
						// 		)
						// 		// ['rgba(63,227,236,0.3)'],
						// 	}
						// }
					},
					{
						name: '其他垃圾',
						type: 'line',
						smooth: true,
                        showSymbol: false,
						data: z,
						// areaStyle: {
						// 	normal: {
						// 		color: new this.$echarts.graphic.LinearGradient(
						// 			0,
						// 			0,
						// 			0,
						// 			1,
						// 			[
						// 				{
						// 					offset: 0,
						// 					color: 'rgba(212,227,44,0.9)'
						// 				},
						// 				{
						// 					offset: 0.4,
						// 					color: 'rgba(212,227,44,0.5)'
						// 				},
						// 				{
						// 					offset: 1,
						// 					color: 'rgba(212,227,44,0.1)'
						// 				}
						// 			]
						// 		)
						// 		// ['rgba(63,227,236,0.3)'],
						// 	}
						// }
					}
				]
			}   
			let myChart = this.$echarts.init(document.getElementById('waste'))
			myChart.setOption(option)
			window.addEventListener('resize', function() {
				myChart.resize()
			})
		}
	},
	watch: {
		waste(newval, oldval) {
			var data = []
			var data1 = []
			var data2 = []
			for (var i = 0; i < newval.length; i++) {
				data[newval.length - 1 - i] = newval[i].time
				data1[newval.length - 1 - i] = newval[i].unRecycle
				data2[newval.length - 1 - i] = newval[i].recycle
			}
			const that = this
			that.hadleGetFilesListApi(data, data1, data2)
		}
	}
}
</script>
